
<template>

	<uni-forms class="login-form" ref="formRef" :model="formdata" :rules="rules">
		<uni-forms-item name="mobile">
			<uni-easyinput v-model="formdata.mobile" :input-border="false" :clearable="false" placeholder="请输入手机号"
				placeholder-style="color: #C3C3C5" maxlength="11" />
		</uni-forms-item>

		<uni-forms-item name="code" style="display: flex;">
			<uni-easyinput v-model="formdata.code" :input-border="false" :clearable="false" placeholder='请输入验证码'
				placeholder-style="color: #C3C3C5" />
			<button class="text-button" type="primary" size="mini" @click="getCode">{{tips}}</button>
			<uv-code seconds="30" ref="code" @change="codeChange"></uv-code>
		</uni-forms-item>
		<view class="agreement">
			<checkbox color="#16C2A3" :checked="isCheck" @click='isCheck = !isCheck' style="transform:scale(0.7)" />
			我已同意
			<text class="link">用户协议</text>
			及
			<text class="link">隐私协议</text>
		</view>
{{token}}
		<button class="uni-button" @click="onsubmits(formRef)">登 录</button>
	</uni-forms>
</template>

<script setup>
	import {ref,reactive} from 'vue';
    import {CodeAPI,CodeLoginAPI} from '@/apis/login.js'
	import {useUserStore} from '@/stores/index.js'
	const UserStore=useUserStore()
	const formdata = reactive({
		mobile: "13212345678",
		code: null
	})
	const formRef = ref(null)
    //协议勾
	const isCheck = ref(false)
    // 表单规则
	const rules = reactive({
		mobile: {
			rules: [{
				required: true,
				errorMessage: '手机号码不能为空',
				trigger: ['blur']
			}, {
				pattern: /^1[0-9]{10}$/,
				errorMessage: '号码格式不正确',
				trigger: ['blur']
			}]
		},
		code: {
			rules: [{
				required: true,
				errorMessage: '验证码不能为空',
				trigger: ['blur']
			}]
		},
	})

	// 登录按钮
	const onsubmits = async(forms) => {
		uni.showLoading({
			title:'加载中...',
			mask:true
		})
		// forms.validate().then((res) => {
		// 	if (isCheck.value) {
		// 		console.log(res);
				
		// 	} else {
		// 		uni.showToast({
		// 			title: '请勾选协议',
		// 			duration: 1000,
		// 			icon: 'none'
		// 		})
		// 	}
		// })
		
		// 这个方法和上面一样
		try{
		  let res=await	forms.validate()
		  if (isCheck.value) {
		  		// console.log(res); //这个是验证通过返回表单数据
				// 获取登录的用户数据
				let resu=await CodeLoginAPI(res)
				  console.log('登录用户信息',resu);
				  UserStore.token=resu.data.token
				  UserStore.userID=resu.data.id
				  // 跳转  这里是对象的另一中uni.UserStore.jumpmethod 换成下面这个方式了因为不能同时点两个
				  uni[UserStore.jumpmethod]({url:UserStore.reurl})
				  uni.hideLoading()
		  	} else {
		  		uni.showToast({
		  			title: '请勾选协议',
		  			duration: 1000,
		  			icon: 'none'
		  		})
		  	}
		}catch(e){
			uni.hideLoading()
			//TODO handle the exception
			console.log(e);
		}
		

	}





	// 倒计时组件的
	const code = ref(null)
	const tips = ref('')

	// 文字赋值
	function codeChange(text) {
		// console.log(text);
		tips.value = text;
	}
	// 获取验证码倒计时开始
	const getCode = async() => {
		// 单个验证 号码
		try{
			await formRef.value.validateField(['mobile'])
			if (code.value.canGetCode) {
			   let res=await CodeAPI({mobile:formdata.mobile,type:'login'})
			   console.log(res);
			   formdata.code=res.data.code
			   uni.showToast({
			   	title: '验证码已发送',
			   	duration: 1000,
			   	icon: 'none'
			   })
			   code.value.start();
			}else{
				uni.showToast({
					title: '倒计时结束后在发送',
					duration: 1000,
					icon: 'none'
				})
				return false
			}
		}catch(e){
			//TODO handle the exception
			console.log(e);
		}
	    
	}
</script>

<style lang="scss">
	@import './styles.scss';
</style>